<template>
  <div class="cart">
    <h2>您的购物车</h2>
    <p v-show="!buyArr.length">
      <i>请添加商品</i>
    </p>
    <ul>
      <li v-for="(v,i) in buyArr" :key="i">
        {{v.title}}-{{v.price}}x{{v.num}}
      </li>
    </ul>
    <p>总计：${{total}}</p>
    <p>
      <button @click="pay" :disabled="!buyArr.length">购买</button>
    </p>
    <p v-show="buyArr.length">Checkout {{Checkout}}</p>
  </div>
</template>

<script>
import { mapState,mapGetters,mapActions } from "vuex";
export default {
  computed: {
    ...mapState("car", ["buyArr",'Checkout']),
    ...mapGetters('car',['total'])
  },
  methods:{
    ...mapActions('car',['pay'])
  }
};
</script>

<style scoped>
</style>